<template>
  <div class="add-templ">
    <!-- 1.0 模板设置 -->
    <div>
      <h3>模板设置</h3>
      <el-input placeholder="请输入模板名称" size="mini" class="templ-name" />
      <ul class="clearfix">
        <li>
          <span>任务类型</span>
        </li>
        <li>
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </li>
      </ul>
    </div>

    <!-- 2.0 基本信息 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <ul>
          <li>
            <span>任务类型</span>
          </li>
          <li>
            <el-select v-model="value" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
        </ul>
        <ul>
          <li>
            <span>店铺名称</span>
          </li>
          <li>
            <el-select v-model="value" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
        </ul>
        <ul>
          <li>
            <span>宝贝链接</span>
          </li>
          <li>
            <el-input type="text" placeholder="*请输入宝贝链接" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>宝贝主图</span>
          </li>
          <li>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button size="mini" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">* 请复制主图链接或上传主图</div>
            </el-upload>
          </li>
        </ul>
        <ul>
          <li>
            <span>进入方式</span>
          </li>
          <li class="style-in">
            <el-select v-model="value" placeholder="分享码(￥0)" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button size="mini" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">* 请复制主图链接或上传主图</div>
            </el-upload>
          </li>
        </ul>
      </el-collapse-item>
      <el-collapse-item title="副宝贝信息" name="2">
        <ul>
          <li>
            <span>宝贝链接</span>
          </li>
          <li>
            <el-input type="text" placeholder="*请输入宝贝链接" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>宝贝主图</span>
          </li>
          <li>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button size="mini" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">* 请复制主图链接或上传主图</div>
            </el-upload>
          </li>
        </ul>
        <ul>
          <li>
            <span>搜索关键词</span>
          </li>
          <li>
            <el-input type="text" placeholder="*请输入30字以内关键词" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>宝贝SKU</span>
          </li>
          <li>
            <el-input type="text" placeholder="*请输入SKU规格及件数，默认随机，1件" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>下单价格</span>
          </li>
          <li>
            <el-input type="text" placeholder="*请输入下单的金额" size="mini"></el-input>
          </li>
        </ul>
      </el-collapse-item>
      <el-collapse-item title="付款信息" name="3">
        <ul>
          <li>
            <span>参团方式</span>
          </li>
          <li>
            <el-select v-model="value" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
        </ul>

        <ul>
          <li>
            <span>是否退款</span>
          </li>
          <li>
            <el-select v-model="value" placeholder="请选择" size="mini">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
        </ul>

        <ul>
          <li>
            <span>宝贝SKU</span>
          </li>
          <li>
            <el-input type="text" placeholder="*请输入SKU规格及件数，默认随机，1件 " size="mini"></el-input>
          </li>
        </ul>

        <ul>
          <li>
            <span>下单价格</span>
          </li>
          <li>
            <el-input type="text" placeholder="*请输入下单的金额" size="mini"></el-input>
          </li>
        </ul>

        <ul>
          <li>
            <span>付款要求</span>
          </li>
          <li>
            <el-input type="text" placeholder="请输入付款需注意的事项，如:随机拍下3款，总价满300已上，退款" size="mini"></el-input>
          </li>
        </ul>
      </el-collapse-item>
      <el-collapse-item title="增值服务" name="4">
        <ul>
          <li>
            <span>
              筛选
              <sub>(免费)</sub>
            </span>
          </li>
          <li>
            <el-input type="text" placeholder="无（找宝贝卡条件）" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>
              评价找茬
              <sub>(￥1/个)</sub>
            </span>
          </li>
          <li>
            <el-input type="text" placeholder="无（深度浏览评价）" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>
              详情页找茬
              <sub>(￥1/个)</sub>
            </span>
          </li>
          <li>
            <el-input type="text" placeholder="无（深度浏览详情页）" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>
              个性定制
              <sub>(￥0.1-0.5/个)</sub>
            </span>
          </li>
          <li>
            <el-input type="text" placeholder="无（操作轨迹个性定制）" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>
              隔日付款
              <sub>(￥1)</sub>
            </span>
          </li>
          <li>
            <el-input type="text" placeholder="无（加购，N小时后付款）" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>
              悬赏
              <sub>(赏金越高，完成越快)</sub>
            </span>
          </li>
          <li>
            <el-input type="text" placeholder="请输入≥0的金额，默认0" size="mini"></el-input>
          </li>
        </ul>
      </el-collapse-item>
      <el-collapse-item title="发布设置" name="5">
        <ul>
          <li>
            <span>发布类型</span>
          </li>
          <li>
            <el-input type="text" placeholder="即刻发布" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>发布笔数</span>
          </li>
          <li>
            <el-input type="text" placeholder="1" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>单笔佣金</span>
          </li>
          <li>
            <el-input type="text" placeholder="1.5" size="mini"></el-input>
          </li>
        </ul>
        <ul>
          <li>
            <span>总佣金</span>
          </li>
          <li>
            <el-input type="text" placeholder="1.5" size="mini"></el-input>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>

    <div class="submit-templ">
      <el-button type="success" size="mini">保 存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style lang="scss" scoped>
.add-templ {
  height: 100%;
  padding: 10px;

  > div:first-of-type {
    border: 1px solid #e4e4e4;
    border-bottom: none;
  }

  .templ-name {
    border-bottom: 1px solid #e4e4e4;
  }
  h3 {
    color: #fff;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
    background-color: #03a9f4;
  }

  ul {
    border-bottom: 1px solid #e4e4e4;
    display: flex;
  }

  li {
    width: 55%;
    line-height: 26px;
    padding-top: 2px;

    &:first-of-type {
      width: 45%;
      text-align: center;
      align-self: center;
    }
    &:nth-of-type(2) {
      border-left: 1px solid #e4e4e4;
    }
  }

  sub {
    position: relative;
    top: -6px;
  }
}

.el-collapse {
  border: 1px solid #e4e4e4;
  border-top: none;
}

.upload-demo {
  width: 100% !important;
  text-align: center;

  .el-button {
    display: block;
    margin: 0 auto;
    padding: 4px 6px;
  }
  div {
    margin: 0;
  }
}

.style-in {
  .el-select {
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 10px;
  }
}

.submit-templ {
  width: 100%;
  height: 35px;

  .el-button {
    width: 100%;
    height: 35px;
  }
}
</style>
